import {
  Button,
  List,
  DatePicker,
  NavBar,
  Popup,
  Toast,
  Dialog,
} from 'antd-mobile'
import classNames from 'classnames'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.scss'
import {
  getEditUserAction,
  updateUserProfileAction,
  uploadPhotoAction,
} from '@/store/actions/profile'
import { useInitialState } from '@/hooks'
import EditInput from '../EditInput'
import EditList from '../EditList'
import { useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import { AppDispatch } from '@/store'
import { formatTime } from '@/utils'
import { logoutAction } from '@/store/actions/login'

const Item = List.Item

export type InputShow = {
  type: '' | 'name' | 'intro'
  name: string
  show: boolean
}

export type SelShow = {
  type: '' | 'gender' | 'photo'
  show: boolean
}

const ProfileEdit = () => {
  const nav = useNavigate()
  const dispatch = useDispatch<AppDispatch>()
  const inputRef = useRef<HTMLInputElement>(null)
  // const dispatch = useDispatch<AppDispatch>()
  // // 1. 获取要修改的用户信息
  // useEffect(() => {
  //   dispatch(getEditUserAction())
  // }, [dispatch])
  // // 2. 获取回填的用户数据
  // const {
  //   editUser: { photo, name, intro, gender, birthday },
  // } = useSelector((state: RootState) => state.profile)

  const {
    editUser: { photo, name, intro, gender, birthday },
  } = useInitialState(getEditUserAction, 'profile')

  // 1. 控制修改昵称弹层
  const [inputShow, setInputShow] = useState<InputShow>({
    type: '',
    name: '',
    show: false,
  })

  // 打开昵称弹层
  const openNamePopup = () => {
    setInputShow({
      type: 'name',
      name: name,
      show: true,
    })
  }

  // 打开简介弹层
  const openIntroPopup = () => {
    setInputShow({
      type: 'intro',
      name: intro,
      show: true,
    })
  }

  // 关闭弹层
  const closeInputPopup = () => {
    setInputShow({
      type: '',
      name: '',
      show: false,
    })
  }

  // 修改
  const updateInfo = (
    type: string,
    value: string | number,
    onClose: () => void
  ) => {
    try {
      if (type === 'photo') {
        /**
         * type === 'photo' 头像修改：
         * 1. == 上传头像 =》存储到服务器，得到一个图片地址 ==
         * 2. 调用修改用户信息异步action存储头像地址
         */
        // 触发文件选择框的点击事件
        inputRef.current?.click()
      } else {
        dispatch(updateUserProfileAction({ [type]: value }))
        Toast.show({
          content: '修改成功',
        })
        onClose()
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 2. 控制修改头像 或 性别弹层
  const [selShow, setSelShow] = useState<SelShow>({
    type: '',
    show: false,
  })

  // 打开性别弹层
  const openGenderPopup = () => {
    setSelShow({
      type: 'gender',
      show: true,
    })
  }

  // 打开头像弹层
  const openPhotoPopup = () => {
    setSelShow({
      type: 'photo',
      show: true,
    })
  }

  // 移动端拍照或选择手机相册会触发
  const uploadPhoto = (e: React.ChangeEvent<HTMLInputElement>) => {
    /**
     * 上传头像：
     * 1. 获取拍照或选择图片的文件file对象
     * 2. 调用后台接口上传图片，得到图片存储地址
     * 3. 再调用更新用户头像接口
     */
    // console.log(e.target.files)
    if (!e.target.files?.length) return
    // 准备头像上传需要的参数=》FormData
    const fm = new FormData()
    fm.append('photo', e.target.files[0])

    try {
      dispatch(uploadPhotoAction(fm))
      Toast.show({ content: '头像修改成功' })
      closeGenderPopup()
    } catch (error) {
      console.log(error)
    }
  }

  // 关闭弹层
  const closeGenderPopup = () => {
    setSelShow({
      type: '',
      show: false,
    })
  }

  // 4. 修改生日
  const [birthShow, setBirthShow] = useState(false)

  // 打开生日弹层
  const openBirthPopup = () => {
    setBirthShow(true)
  }

  // 关闭生日弹层
  const closeBirthPopup = () => {
    setBirthShow(false)
  }

  const updateBirth = (date: Date) => {
    // console.log('data', date)
    updateInfo('birthday', formatTime(date), closeBirthPopup)
  }

  // 5. 点击退出
  const onLogout = () => {
    // 写法1：
    // Dialog.confirm({
    //   title: '提示：确认退出极客园吗？',
    //   confirmText: '退出',
    //   onConfirm: () => {
    //     console.log('退出')
    //     // 1、删除token
    //     dispatch(logoutAction())
    //     // 2、跳转到登录页
    //     nav('/login')
    //   },
    // })

    // 写法2
    const handler = Dialog.show({
      title: '温馨提示',
      content: '亲，你确定退出吗？',
      actions: [
        [
          {
            key: 'cancel',
            text: '取消',
            onClick: () => {
              handler.close()
            },
          },
          {
            key: 'confirm',
            text: '退出',
            style: {
              color: 'var(--adm-color-weak)',
            },
            onClick: () => {
              handler.close()
              // 1、删除token
              dispatch(logoutAction())
              // 2、跳转到登录页
              nav('/login')
            },
          },
        ],
      ],
    })
  }

  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          onBack={() => {
            nav(-1)
          }}
          style={{
            '--border-bottom': '1px solid #F0F0F0',
          }}>
          个人信息
        </NavBar>

        {/* 展示待修改的个人信息 */}
        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              onClick={openPhotoPopup}
              extra={
                <span className="avatar-wrapper">
                  <img
                    width={24}
                    height={24}
                    src={
                      photo || 'http://toutiao.itheima.net/images/user_head.jpg'
                    }
                    alt=""
                  />
                </span>
              }
              arrow>
              头像
            </Item>
            <Item onClick={openNamePopup} arrow extra={name || '暂无昵称'}>
              昵称
            </Item>
            <Item
              onClick={openIntroPopup}
              arrow
              extra={
                <span className={classNames('intro', 'normal')}>
                  {intro || '未填写'}
                </span>
              }>
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item
              onClick={openGenderPopup}
              arrow
              extra={gender === 0 ? '男' : '女'}>
              性别
            </Item>
            <Item onClick={openBirthPopup} arrow extra={birthday || '--'}>
              生日
            </Item>
          </List>
          {/* 日期组件 */}
          <DatePicker
            visible={birthShow} // 控制组件的显隐
            value={new Date(birthday)} // 打开日期组件，显示后台返回的日期
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
            onCancel={closeBirthPopup} // 点击取消按钮，关闭弹层
            onConfirm={updateBirth} // 点击确定按钮，获取修改的值，调用修改接口
          />
        </div>

        <div className="logout">
          <Button className="btn" onClick={onLogout}>
            退出登录
          </Button>
        </div>
      </div>

      {/* 1、修改昵称 或 简介弹层 */}
      <Popup destroyOnClose visible={inputShow.show} position="right">
        {/* 
          将关闭弹层的方法传给子组件
          将昵称name传给子组件，用户回显昵称
        */}
        <EditInput
          // key={inputShow.type}
          type={inputShow.type}
          updateInfo={updateInfo}
          name={inputShow.name}
          onClose={closeInputPopup}
        />
      </Popup>

      {/* 2、修改头像 或 性别弹层 */}
      <Popup visible={selShow.show} position="bottom">
        <EditList
          type={selShow.type}
          updateInfo={updateInfo}
          onClose={closeGenderPopup}
        />
      </Popup>

      <input ref={inputRef} onChange={uploadPhoto} type="file" hidden />
    </div>
  )
}

export default ProfileEdit
